<template>
  <div class="app">
    <!-- <router-view></router-view> -->
    <h2>App</h2>
    <div class="nav">
      <router-link :to="{path: '/home'}" active-class="link-active" >Home</router-link>
      <router-link to="/about" active-lass="link-active" >About</router-link>
      <router-link to="/user" active-lass="link-active" >User</router-link>
      <router-link to="/user/123" active-lass="link-active" >User123</router-link>
      <router-link to="/user/321" active-lass="link-active" >User321</router-link>
      <router-link to="/order" active-lass="link-active" >订单</router-link>
      <!--其他元素跳转-->
      <span @click="homespanClick">首页</span>
      <button @click="aboutbtnClick">关于</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  const router = useRouter();

  function homespanClick(params) {
    router.push({
      // name: 'home'
      path: '/home'
    })
  } 

  function aboutbtnClick(params) {
    // 方式一
    // router.push('/about')
    // 方式二
    router.push({
      path: '/about',
      query: {
        name: 'why',
        age: 18
      }
    })
  }

</script>

<style>
  .router-link-active{
    color: red;
    font: 20px;
  }
</style>
